import { View, Text, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import chaiquan from '@/assets/index/icon_柴犬.png';
import daxiongmao from '@/assets/index/icon_大熊猫.png';
import haibao from '@/assets/index/icon_海豹.png';
import huli from '@/assets/index/icon_狐狸.png';
import pangxie from '@/assets/index/icon_螃蟹.png';
import qie from '@/assets/index/icon_企鹅.png';
import xiaokonglong from '@/assets/index/icon_小恐龙.png';
import xiaomao from '@/assets/index/icon_小猫.png';

export default function Tools({ className }) {
  const tools = [
    {title: '柴犬', desc: '这是柴犬', icon: chaiquan, toPage: ()=>{Taro.switchTab({url: '/pages/products/index'})}},
    {title: '大熊猫', desc: '这是大熊猫', icon: daxiongmao, toPage: ()=>{Taro.switchTab({url: '/pages/products/index'})}},
    {title: '海豹', desc: '这是海豹', icon: haibao, toPage: ()=>{Taro.switchTab({url: '/pages/products/index'})}},
    {title: '狐狸', desc: '这是狐狸', icon: huli, toPage: ()=>{Taro.switchTab({url: '/pages/products/index'})}},
    {title: '螃蟹', desc: '这是螃蟹', icon: pangxie, toPage: ()=>{Taro.switchTab({url: '/pages/products/index'})}},
    {title: '企鹅', desc: '这是企鹅', icon: qie, toPage: ()=>{Taro.switchTab({url: '/pages/products/index'})}},
    {title: '小恐龙', desc: '这是小恐龙', icon: xiaokonglong, toPage: ()=>{Taro.switchTab({url: '/pages/products/index'})}},
    {title: '小猫', desc: '这是小猫', icon: xiaomao, toPage: ()=>{Taro.switchTab({url: '/pages/products/index'})}},
  ]

  return (
    <View className={`w-96/100 pb-[30px] ${className}`}>
      <View className="bg-white px-4 py-8 grid grid-cols-4 gap-x-2 gap-y-5 rounded-bl-md rounded-br-md ">
        {tools.map((item, index) => (
          <View onClick={item.toPage} key={index} className="flex flex-col justify-center items-center">
            <Image src={item.icon} className="w-10 h-10"/>
            <View className="flex flex-col justify-center items-center">
              <Text className="font-bold text-sm">{item.title}</Text>
              <Text className="text-xs text-gray-500">{item.desc}</Text>
            </View>
          </View>
        ))}
      </View>
    </View>
  )
}

